<template>
  <div class="detail-wrap">
    <el-button type="primary" @click="goBack" class="back-btn" size="mini"
      >返回</el-button
    >
    <el-row :gutter="40"
      ><el-col :span="12" class="left-col"
        ><div class="title">
          {{ modelId != 10 && modelId != 9 ? "原始图片" : "原始文件" }}
        </div>
        <div v-if="modelId != 10 && modelId != 9">
          <img :src="form.oriFile" style="width: 100%" />
        </div>
        <div v-else>
          <div class="csvArea" id="csvTableArea"></div>
        </div> </el-col
      ><el-col class="right-col" :span="12"
        ><div v-if="modelId == 6">
          <div class="title">红外辐射强度直方图</div>
          <img :src="form.histogramImage" style="width: 100%" />
          <div class="title" style="margin-top: 20px">红外辐射强度热特征图</div>
          <img :src="form.irFeatureImage" style="width: 100%" />
        </div>
        <div v-else>
          <div class="title">抽取结果</div>
          <img :src="form.drawImage" style="width: 100%" />
        </div>
        <TableComp
          style="margin-top: 20px"
          ref="multipleTable"
          :tableData="tableData"
          :tableConfig="tableConfig"
          :isSelect="false"
          :isIndex="true"
          :isShowPage="false"
        ></TableComp> </el-col
    ></el-row>
  </div>
</template>

<script>
const resultHeader = [
  {
    prop: "result",
    label: "抽取结果",
  },
  {
    prop: "type",
    label: "类别",
  },
];
export default {
  data() {
    return {
      form: {
        oriFile: "", // 原始文件、图片
        drawImage: "", // 抽取结果
      },
      tableData: [{}],
      resultHeader: [
        {
          prop: "result",
          label: "抽取结果",
        },
        {
          prop: "type",
          label: "类别",
        },
      ],
      probTable: [
        { prop: "xyxyStr", label: "边界值" },
        { prop: "label", label: "类别" },
        { prop: "conf", label: "概率值" },
      ],
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
    modelId() {
      return this.$route.params.modelId;
    },
    tableConfig() {
      let config = [];
      switch (this.modelId) {
        case "9":
          // RCS实体抽取
          config = resultHeader;
          break;
        case "10":
          // 一维距离序列抽取
          config = resultHeader;
          break;
        case "6":
          // 红外辐射强度
          config = resultHeader;
          break;
        case "5":
          // 目标检测分类
          config = this.probTable;
          break;
        case "7":
          // 红外图像实体
          config = this.probTable;
          break;
        case "8":
          // 红外视频序列
          config = this.probTable;
          break;
        case "11":
          // SAR实体抽取
          config = this.probTable;
          break;
      }
      return config;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$api.knowledgeGeneration.imageDetail(this.id).then((res) => {
        const { data, code } = res.data;
        if (code == 200) {
          Object.assign(this.form, data);
          switch (this.modelId) {
            case "9":
              // RCS实体抽取
              this.readCSV(this.form.oriFile);
              this.tableData = [
                {
                  result: this.form.maxValue,
                  type: "RCS曲线最大值",
                },
                {
                  result: this.form.minValue,
                  type: "RCS曲线最小值",
                },
                {
                  result: this.form.meanValue,
                  type: "RCS曲线平均值",
                },
              ];
              break;
            case "10":
              // 一维距离序列抽取
              this.readCSV(this.form.oriFile);
              this.tableData = [
                {
                  result: this.form.maxValue,
                  type: "一维距离序列最大值",
                },
                {
                  result: this.form.minValue,
                  type: "一维距离序列最小值",
                },
                {
                  result: this.form.meanValue,
                  type: "一维距离序列平均值",
                },
              ];
              break;
            case "6":
              this.tableData = [
                {
                  result: this.form.maxValue,
                  type: "辐射强度最大值",
                },
                {
                  result: this.form.minValue,
                  type: "辐射强度最小值",
                },
                {
                  result: this.form.meanValue,
                  type: "辐射强度平均值",
                },
              ];
              break;
            case "5":
              this.tableData = this.form.bbxs;
              break;
            case "7":
              // 红外图像实体
              this.tableData = this.form.bbxs;
              break;
            case "8":
              // 红外视频序列
              this.tableData = this.form.bbxs;
              break;
            case "11":
              //SAR实体抽取
              this.tableData = this.form.bbxs;
              break;
          }
        }
      });
    },
    // 从url读取csv文件
    readCSV(url) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
          var csv = xhr.responseText;
          var lines = csv.split(/\r?\n|\r/);
          var table = "<table>";
          table += "<tbody>";
          for (var singleRow = 0; singleRow < lines.length; singleRow++) {
            table += "<tr>";
            var rowCells = lines[singleRow].split(",");
            for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
              table += "<td>";
              table += rowCells[rowCell];
              table += "</td>";
            }
            table += "</tr>";
          }
          table += "</tbody>";
          table += "</table>";
          document.getElementById("csvTableArea").innerHTML = table;
        }
      };
      xhr.open("GET", url, true);
      xhr.send();
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-wrap {
  margin-top: 16px;
  padding: 32px 16px;
  background: #ffffff;
  border-radius: 4px;
  position: relative;
  .back-btn {
    position: absolute;
    right: 32px;
    z-index: 10;
  }
  .title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 16px;
  }
  .left-col {
    border-right: 1px solid #d7d7d7;
    .csvArea {
      overflow: auto;
      height: calc(100vh - 210px);
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>
